<template>
  <page-wrap>
    <div class="recycle-container">
      <div class="recycle-container-header">
        <!-- <van-field v-model="positionPeople" is-link class="recycle-position" input-align="right" readonly
          name="positionPeople" label="回收人" placeholder="请选择" @click="positionPeopleShow = true" /> -->
          <van-field v-model="positionPeople"  class="recycle-position" input-align="right" readonly
          name="positionPeople" label="回收人" placeholder="请选择" />
        <!-- <van-field
          v-model="positionText"
          is-link
          class="recycle-position"
          input-align="right"
          readonly
          name="position"
          label="回收位置"
          placeholder="请选择"
          @click="positionShow = true"
        /> -->
        <van-field v-model="selectedRoom" is-link class="recycle-position" input-align="right" readonly name="position"
          label="回收桌号" placeholder="请选择桌号（非必选）" @click="positionTableShow = true" />
        <div class="wineChoose">
          <div class="wineChoose-upper" @click="onOpen">
            <div class="wineChoose-title">酒水选择</div>
            <div class="wineChoose-right">
              <div class="wineChoose-value">请添加</div>
              <div class="wineChoose-icon"></div>
            </div>
          </div>
          <div class="wineChoose-below" v-show="addInfo">
            <div class="wineChoose-below-item" v-for="(item, index) in addInfo" :key="index"
              :class="{ active: winelist === index }" @click="open(index)">
              <div class="below-item-header">
                <div class="below-item-left">
                  {{ item.Name }}
                </div>
                <div class="below-item-right">
                  <div class="below-item-num">×{{ item.total }}</div>

                  <img :src="minus" class="below-item-img" @click.stop="delItem(index)" />
                </div>
              </div>
              <div class="below-item-main" v-show="winelistShow === index && isShow">
                <ul class="below-main-ul">
                  <li class="below-main-li" v-for="(item1, index1) in item.children" :key="index1">
                    <div class="main-li-bottle" :class="{ active: item1.type === '2' }">
                      {{ item1.type === '1' ? '整瓶' : '非整瓶' }}
                    </div>
                    <div class="main-li-right">
                      <z-stepper :disabletype="2" :min="0" :default-value="item1.num" :max="getMaxValue(item1.type)" theme="square"
                        :step="item1.type == 1 ? 1 : 0.1" :class="{ nodel: index1 <= 1 }"
                        @change="onChange(index, index1, $event)" @click.stop=""></z-stepper>
                      <div v-if="index1 >= 2" @click.stop="onDel(item, index1)" class="main-li-del">
                        删除
                      </div>
                    </div>
                  </li>
                </ul>
                <div class="below-item-footer" v-if="item.StoreType === '2' || !item.StoreType">
                  <img :src="plus" class="item-footer-img" />
                  <div class="item-footer-title" @click.stop="onAddWine(item)">
                    添加一行非整瓶
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="save-section" v-if="addInfo.length > 0">
        <div class="save-section-heading">回收照片(酒水选择顺序对应)</div>
        <div class="save-card section">
          <zdupload v-model="fileList" :after-read="afterRead" :max="addInfo.length" />
        </div>
      </div>
      <div class="recycle-container-main">
        <div class="recycle-main-title">备注</div>
        <van-field v-model="recycleForm.remark" rows="2" autosize type="textarea" placeholder="请输入备注" />
      </div>
      <div class="recycle-container-footer">
        <z-button bold :disabled="isAllValuesPresent" @click="onSubmit" v-has-role="'waiter-guestCovery'">回收</z-button>
      </div>
    </div>
  </page-wrap>
  <z-picker v-model:show="positionPeopleShow" :columns="positionPeopleColumns" title="回收人"
    @confirm="onConfirmPeople($event, 'waiter')" />
  <z-picker v-model:show="positionShow" :columns="positionColumns" title="回收位置"
    @confirm="onConfirm($event, 'waiter')" />

  <z-popup v-model:show="positionTableShow" position="bottom" style="border-radius: 24px 24px 0px 0px">
    <div class="table-select">
      <div class="table-select-top">
        <div class="cancle" @click="positionTableShow = false">取消</div>
        <div class="title">选择桌号</div>
        <div class="confirm" @click="tableConfirm">确认</div>
      </div>
      <div class="table-select-title">
        <div class="select-title-item" :class="{ selected: current === k }" v-for="(v, k) in configStore.zoneList"
          :key="k" @click="areaSelected(v.roomAreaCode, k)">
          {{ v.roomAreaName }}
        </div>
      </div>
      <div class="table-select-value">
        <div class="select-value-item" :class="{ selected: tableCurrent === k }" v-for="(v, k) in configStore.roomList.filter(
          item => item.roomAreaCode === selectedAreaCode
        )" :key="k" @click="tableSelected(v.roomName, v.roomCode, k)">
          {{ v.roomName }}
        </div>
      </div>
    </div>
  </z-popup>

  <!-- 酒水选择弹窗 -->
  <z-popup v-model:show="addShow" closeable title="酒水选择">
    <div class="popup-wineChoose">
      <div class="popup-wineChoose-header">
        <z-search placeholder="请输入名称" @query="onQuery" v-model="postForm.name" @update:model-value="onUpdateVal" />
      </div>
      <div class="popup-wineChoose-main">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="loadData"
          :immediate-check="false" offset="100">
          <div class="wineChoose-main-item" v-for="(item, index) in wineInfo" :key="index" @click="currentIndex = index"
            :class="{ active: currentIndex === index }">
            <div class="wineChoose-main-name">{{ item.Name }}</div>
          </div>
        </van-list>
      </div>
      <div class="popup-wineChoose-footer">
        <z-button @click="onAdd" style="width: 120px; margin: 0px auto">添加</z-button>
      </div>
    </div>
  </z-popup>
</template>

<script setup>
import { showToast } from 'vant'
import plus from '@/assets/svg/recycle/v_recycle-plus.svg'
import triangle from '@/assets/svg/recycle/v_recycle-triangle.svg'
import minus from '@/assets/svg/recycle/v_recycle-minus.svg'
import Api from '@/api'
import useAppStore from '@/store/app'
import useConfigStore from '@/store/config'
import { set } from 'lodash'
import Compressor from "compressorjs";
import ls from '@/lib/ls'
const router = useRouter()
const appStore = useAppStore()
const configStore = useConfigStore()
// 获取登录的服务员账户
const account = ref(appStore.user_info)
// -------------------------------------------------回收人-----------------------------------------------------
const positionPeople = ref(account.value.userName)
const positionPeopleShow = ref(false)
const positionPeopleColumns = ref([]) // 回收数组
// 回收位置弹窗确定按钮
const onConfirmPeople = function (ev, type) {
  positionPeople.value = ev.selectedOptions[0].text
  positionPeopleShow.value = false
  recycleForm.takeUserCode = ev.selectedOptions[0].userCode
  recycleForm.takeUserName = ev.selectedOptions[0].userName
}
// -------------------------------------------------回收位置-----------------------------------------------------
const positionText = ref('')
const positionShow = ref(false)
const positionColumns = ref([]) // 回收数组
// 回收位置弹窗确定按钮
const onConfirm = function (ev, type) {
  positionText.value = ev.selectedOptions[0].text
  positionShow.value = false
  recycleForm.depotCode = ev.selectedOptions[0].Code
  recycleForm.depotName = ev.selectedOptions[0].Name
  isAllValuesPresent.value = false // 回收按钮权限
}
// -------------------------------------------------回收桌号-----------------------------------------------------
const positionTableShow = ref(false)
const selectedAreaCode = ref('') // 选中的回收区域编号
if (configStore.zoneList[0]) {
  selectedAreaCode.value = configStore.zoneList[0].roomAreaCode
}
const selectedRoom = ref('') // 选中的回收房间

const current = ref(0) // 区域选择下标
const tableCurrent = ref() // 桌台选择下标
const areaSelected = (roomAreaCode, k) => {
  current.value = k
  selectedAreaCode.value = roomAreaCode
  tableCurrent.value = ''
}
const selectTool = ref('') // 过渡工具
const selectCode = ref('') // 过渡工具

const fileList = ref([])
const tableSelected = (roomName, roomCode, k) => {
  tableCurrent.value = k
  selectTool.value = roomName
  selectCode.value = roomCode
}
// 确定
const tableConfirm = () => {
  selectedRoom.value = selectTool.value
  recycleForm.roomCode = selectCode.value
  positionTableShow.value = false
}

//----------------------------------------------酒水选择 添加弹窗------------------------------------------------

const wineInfo = ref([])
const addInfo = ref([])
const currentIndex = ref(0) // 哪一个高亮显示
const addShow = ref(false)
const onOpen = () => {
  // 请添加弹窗
  postForm.name = ''
  addShow.value = true
  loadData(true)
}
//----------------------------------------------请添加弹窗查询---------------------------------------------------
const onQuery = () => {
  loadData(true)
}
const searchTimer = ref(null)
const onUpdateVal = val => {
  clearTimeout(unref(searchTimer))
  searchTimer.value = setTimeout(() => {
    loadData(true)
  }, 500)
}
//----------------------------------------------请添加弹窗确认添加---------------------------------------------------
const onAdd = () => {
  if (!wineInfo.value[currentIndex.value]) {
    showToast('未选择酒水')
    return
  }
  if (
    addInfo.value.some(
      item => item.Code === wineInfo.value[currentIndex.value].Code
    )

  ) {
    showToast('该酒水已选择')
    return
  }
  CodeList.value.push(wineInfo.value[currentIndex.value].Code)
  addInfo.value.push(wineInfo.value[currentIndex.value])
  addShow.value = false
}
// 步进器改变酒水数量
const onChange = (k, ci, value) => {
  addInfo.value[k].children[ci].num = value
}

// 非整瓶最大值为 0.9，整瓶没有最大值限制
const getMaxValue = type => {
  return type === '2' ? 0.9 : Infinity
}
// 监听酒水的总数
watch(
  () => addInfo.value,
  (newVal, oldVal) => {
    newVal.forEach(obj => {
      // 计算当前对象的 total 属性 // 保留一位小数
      obj.total = obj.children.reduce((total, child) => {
      const num = Number(child.num);
      return isNaN(num) ? total : total + num;
  }, 0)
  .toFixed(1);
    })
  },
  { deep: true }
)
// -----------------------------------展开酒水、酒水删除----------------------------------------
const winelist = ref(0)
const winelistShow = ref(0)
let isShow = ref(true)
const open = value => {
  winelist.value = value
  if (winelistShow.value !== value) {
    isShow.value = true
  } else {
    isShow.value = !isShow.value
  }
  winelistShow.value = value
}
// 删除非整瓶
const onDel = (v, ci) => {
  v.children.splice(ci, 1)
}
// 删除添加的酒水
const delItem = item => {
  addInfo.value.splice(item, 1)
  fileList.value.splice(item, 1)
}
const onAddWine = v => {
  v.children.push({
    type: '2',
    num: 0
  })
}
//----------------------------------------------加载---------------------------------------------------
//表单
const postForm = reactive({
  name: '',
  pageSize: 15,
  pageIndex: 1
})
const loading = ref(false)
const finished = ref(false)
const loadData = async function (refresh = false) {
  if (refresh === true) {
    finished.value = false
    postForm.pageIndex = 1
    wineInfo.value = []
  }
  loading.value = true
  const resp = await Api.Common.AppObjProcess.Do({
    functionName: 'getWineListByName',
    contentData: postForm
  })
  let nowList = resp.result

  if (refresh === true) {
    if (nowList.length !== postForm.pageSize) {
      finished.value = true
    }
  }
  nowList = nowList.filter(obj => obj.StoreType !== '0') // 过滤掉StoreType为0的（不可回收）
  // 添加默认的整瓶和非整瓶数组 StoreType对应能不能回收非整瓶
  nowList.forEach(obj => {
    if (obj.StoreType === '2') {
      obj.children = [
        {
          type: '1',
          num: 0
        },
        {
          type: '2',
          num: 0
        }
      ]
    } else if (obj.StoreType === '1') {
      obj.children = [
        {
          type: '1',
          num: 0
        }
      ]
    } else if (obj.StoreType === '0') {
      // showToast('该商品不可回收')
      // return
    } else {
      obj.children = [
        {
          type: '1',
          num: 0
        },
        {
          type: '2',
          num: 0
        }
      ]
    }
    obj.total = 0
  })
  Array.prototype.push.apply(wineInfo.value, nowList)
  if (nowList.length > 0) {
    postForm.pageIndex++
  } else {
    finished.value = true
  }
  loading.value = false
  // if (refresh===true) {
  //     initBs.value++
  // }
}

//----------------------------------------------回收按钮-------------------------------------------------
const recycleForm = reactive({
  roomCode: '', // 回收桌号
  depotCode: '', // 仓库编码
  depotName: '', // 仓库名称
  takeUserCode: account.value.userCode, // 回收人编码
  takeUserName: account.value.userName, // 回收人名称
  // userCode: account.value.userCode, // 服务员编码
  userName: account.value.userName, // 服务员名称
  remark: '', // 备注
  goods: [] // 商品列表
})
const isAllValuesPresent = ref(false) // 回收按钮权限
const ALLList = ref([]) // 转化用数组
let objAll = {
  goodsCode: '',
  goodsName: '',
  uomCode: '',
  uomName: '',
  storeQty: ''
} // 转化用对象
// ---------------------回收-----------------
const onSubmitFlag = ref(false)
const onSubmit = () => {
 

  ALLList.value = []
  // 遍历数组，按需求生成新数组
  if (addInfo.value.length === 0) {
    showToast('请选择酒水')
    return
  }

  if (addInfo.value.some(item => item.total === '0.0')) {
    showToast('酒水数量不能为零')
    return
  }
  
  if(CustomerLostTakeStatus.value) {
      if( fileList.value.length < addInfo.value.length  ){
        showToast('存酒照片和酒水种类数量需要一致')
        return
      }
  }


 
  if(onSubmitFlag.value){
    showToast('提交中，请稍等')
    return
  }
  onSubmitFlag.value = true

  addInfo.value.forEach(item => {
    if (item.children) {
      item.children.forEach(i => {
        objAll = {} // 清空，防止影响后续
        objAll.goodsCode = item.Code
        objAll.goodsName = item.Name
        objAll.uomCode = item.UomCode
        objAll.uomName = item.UomName
        objAll.recoveryQty = i.num
        ALLList.value.push(objAll)
      })
    }
  })

  //图片数据处理
  if (fileList.value.length > 0) {
    let imgList = fileList.value.map(item => item.url);
    console.log(imgList, 'imgList')
    console.log(CodeList.value, 'CodeList')

    // 使用 map 组合两个数组
    const combinedList = CodeList.value.map((goodsCode, index) => {
      return {
        goodsCode: goodsCode,
        url: imgList[index] // 根据索引配对图片 URL
      };
    });

    console.log(combinedList, 'casc');


    // 创建一个根据 goodsCode 和 recoveryQty 的映射
    const imgMap = combinedList.reduce((map, item) => {
      if (!map[item.goodsCode]) {
        map[item.goodsCode] = [];
      }
      map[item.goodsCode].push(item.url); // 将图片 URL 按照 goodsCode 分组
      return map;
    }, {});

    console.log(imgMap, 'imgMap')

    // 更新 ALLList.value attachment 字段
    const updatedGoodsList = ALLList.value.map(good => {
      // 获取对应 goodsCode 的图片数组
      const goodsImages = imgMap[good.goodsCode] || [];
      // 为每个商品添加 attachment 字段
      return {
        ...good,  // 保留其他字段
        attachment: goodsImages[0] || ""  // 如果找到图片，则添加，否则为空字符串
      };
    });

    ALLList.value = updatedGoodsList
  } else {
    ALLList.value.map(item => {
      item.attachment = ""
    })
  }


  ALLList.value = JSON.stringify(ALLList.value)
  recycleForm.goods = ALLList.value
  const WineRecovery = Api.Common.AppObjProcess.Do({
    functionName: 'WineRecovery',
    contentData: recycleForm
  }).then(res => {
    showToast('回收成功')
    router.push({
      path: `/`
    })
    onSubmitFlag.value = false
  })
}

const compressImage = async file => {
    if (!file) {
      return;
    }
    return new Promise((reslove, reject) => {
      // compressorjs 默认开启 checkOrientation 选项
      // 会将图片修正为正确方向
      new Compressor(file, {
        quality: 0.6, // 设置压缩质量，范围从 0 到 1，默认0.8
        maxWidth: 1000,
        maxHeight: 1000,
        convertSize: 1000000,
        checkOrientation: true, // 启用 EXIF 方向修正
        success(result) {
          const compressedImage = new File([result], result.name, { type: result.type });
          reslove(compressedImage);
        },
        error(err) {
          reject(err.message);
        },
      });
    });
  }
const CodeList = ref([])
// -----------------------------------上传照片----------------------------------------
const afterRead = async files => {
     // 如果是一次多张上传
  if (Array.isArray(files)) {
    files.forEach(async item => {
      item.file = await compressImage(item.file);
    });
  } else {
      // 单文件上传
    files.file = await compressImage(files.file);
  }
  const resp = await Api.Common.UploadPosWine.FileDo(files)
  console.log(resp);
  const urlPaths = resp.urlPath.split(',')
  console.log(urlPaths);
  const fileNames = resp.fileName.split(',')
  const transData = urlPaths.map((urlPath, index) => ({
    url: urlPath,
    name: fileNames[index]
  }))
  console.log(transData);
  for (const fileItem of unref(fileList)) {
    for (const transItem of transData) {
      if (!fileItem.url) {
        fileItem.url = transItem.url
      }
    }
  }
  console.log(fileList.value, 'transData2');
}


// -----------------------------------初始化----------------------------------------
const CustomerLostTakeStatus = ref(null) // 客遗回收图片限制
const onInit = () => {
  // --------------------获取回收位置------------------
  Api.Common.AppObjProcess.Do({
    functionName: 'getDepotList',
    contentData: {}
  }).then(res => {
    const DepotList = res.result
    // 改造数组 添加picker需要的text和value
    let modifiedObjArr = DepotList.map(obj => {
      return { ...obj, text: obj.Name, value: obj.Code }
    })

    Array.prototype.push.apply(positionColumns.value, modifiedObjArr)
  })

  // --------------------获取服务员信息--------------------
  Api.Common.AppObjProcess.Do({
    functionName: 'getWaiterList',
    contentData: {}
  }).then(res => {
    const DepotList = res.result
    // 改造数组 添加picker需要的text和value
    let modifiedObjArr = DepotList.map(obj => {
      return { ...obj, text: obj.userName, value: obj.userCode }
    })

    Array.prototype.push.apply(positionPeopleColumns.value, modifiedObjArr)
  })

  Api.Common.AppObjProcess.Do({ "functionName": "GetBaseConfigInfo", "contentData": { orgCode: ls.get('ORG_CODE') } }).then(res => {
    console.log(res,'res')
    CustomerLostTakeStatus.value = res.customerLostTakePictureLimit
  })

}
onInit()
</script>

<style scoped lang="scss">
:deep(.van-popup) {
  overflow-y: visible !important;
}

.recycle-container {
  .recycle-container-header {
    padding: 10px 12px;
    margin-bottom: 20px;

    .recycle-position {
      margin-bottom: 10px;
    }

    .wineChoose {
      .wineChoose-upper {
        background: #28282e;
        border-top-left-radius: 8px;
        border-top-right-radius: 8px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 18px 12px;

        .wineChoose-title {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 500;
          color: #cccccc;
          line-height: 16px;
        }

        .wineChoose-right {
          display: flex;
          align-items: center;

          .wineChoose-value {
            font-size: 16px;
            font-family: PingFang SC;
            font-weight: 500;
            color: #ffaa00;
            line-height: 16px;
          }

          .wineChoose-icon {
            width: 16px;
            height: 16px;
            margin-left: 7px;
            background-image: url('@/assets/svg/recycle/v_recycle-plus.svg');
            background-repeat: no-repeat;
            background-size: 100% 100%;
          }
        }
      }

      .wineChoose-below {
        background: #28282e;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        padding: 2px 24px 2px;

        .wineChoose-below-item {
          // padding-bottom: 20px;
          padding: 13px 12px;
          background: #383840;
          border-radius: 8px;
          margin-bottom: 10px;

          &.active {
            border: 1px solid #ffdd99;
          }

          .below-item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;

            .below-item-left {
              font-size: 14px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffffff;
              line-height: 14px;
            }

            .below-item-right {
              display: flex;

              .below-item-num {
                font-size: 14px;
                font-family: PingFang SC;
                font-weight: 500;
                color: #cccccc;
                line-height: 14px;
                margin-right: 12px;
              }

              .below-item-img {
                width: 16px;
                height: 16px;
              }
            }
          }

          .below-item-main {
            .below-main-ul {
              padding: 12px 38px 0 13px;

              .below-main-li {
                list-style: none;
                display: flex;
                align-items: center;
                justify-content: space-between;

                padding-bottom: 12px;

                .main-li-bottle {
                  width: 40px;
                  text-align: center;
                  background: #454d41;
                  border-radius: 2px;
                  padding: 3px 0;
                  font-size: 12px;
                  font-family: PingFang SC;
                  font-weight: 500;
                  color: #8ae65c;
                  line-height: 12px;

                  &.active {
                    background: #494d41;
                    color: #b8e65c;
                  }
                }

                .main-li-right {
                  display: flex;
                  align-items: center;

                  .nodel {
                    margin-right: 46px;
                  }

                  .main-li-del {
                    margin-left: 19px;
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 500;
                    color: #66ccff;
                    line-height: 14px;
                  }
                }
              }
            }
          }

          .below-item-footer {
            display: flex;
            align-items: center;
            padding-left: 12px;
            padding-bottom: 8px;

            .item-footer-img {
              width: 16px;
              height: 16px;
              margin-right: 4px;
            }

            .item-footer-title {
              font-size: 12px;
              font-family: PingFang SC;
              font-weight: 500;
              color: #ffaa00;
              line-height: 12px;
            }
          }
        }
      }
    }

    ::v-deep(.van-field) {
      background-color: #28282e;
      border: none;
      padding: 14px 12px;
      align-items: center;
    }

    ::v-deep(.van-field__label) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #cccccc;
      line-height: 16px;
    }

    ::v-deep(.van-field__control) {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff !important;
      line-height: 16px;
    }

    ::v-deep(.van-cell:after) {
      display: none;
    }

    ::v-deep(.van-cell__right-icon) {
      // display: none;
      color: #ffffff;
      transform: rotate(90deg);
    }
  }

  .recycle-container-main {
    padding: 0 12px;
    margin-bottom: 30px;

    .recycle-main-title {
      font-size: 16px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #ffffff;
      line-height: 16px;
      margin-bottom: 20px;
    }

    ::v-deep(.van-field) {
      border-radius: 4px;
      background: #28282e;
      padding: 12px 20px 12px 12px;
    }

    ::v-deep(.van-field__control) {
      color: #ffffff;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #fffefe;
      line-height: 21px;
    }
  }

  .recycle-container-footer {
    padding: 0 12px;
  }
}

.table-select {
  padding: 16px 0;

  .table-select-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 16px;

    .cancle {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #999999;
      line-height: 16px;
    }

    .title {
      font-family: PingFang SC;
      font-weight: bold;
      font-size: 18px;
      color: #fefefe;
      line-height: 18px;
    }

    .confirm {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffaa00;
      line-height: 16px;
    }
  }

  .table-select-title {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 10px 0px 0 12px;
    border-top: 1px solid #505059;
    flex-wrap: wrap;

    .select-title-item {
      margin-right: 9px;
      width: 80px;
      text-align: center;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 16px;
      color: #ffffff;
      line-height: 16px;
      background: #5c5c66;
      border-radius: 4px;
      padding: 13px 0px;
      margin-bottom: 10px;

      &.selected {
        color: #ffbf40;
        background: #665f52;
      }
    }
  }

  .table-select-value {
    background: #393940;
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin: 0 12px;
    padding: 12px 0 0 12px;

    .select-value-item {
      width: 59px;
      // flex: 20%;
      padding: 10px 0;
      text-align: center;
      background: #5c5c66;
      border-radius: 4px;
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 14px;
      color: #ffffff;
      line-height: 14px;
      margin: 0 8px 10px 0;

      &.selected {
        color: #ffbf40;
        background: #665f52;
      }
    }
  }
}

.popup-wineChoose {
  .popup-wineChoose-header {
    background: #45454d;
    margin-top: 10px;
    position: sticky;
    left: 0;
    top: 0;
    width: 100%;
  }

  .popup-wineChoose-main {
    max-height: 400px;
    overflow-y: auto;
    margin: 0px 12px;
    min-width: 310px;
    padding: 10px 0;
    border-top: 1px solid #505059;

    .wineChoose-main-item {
      &.active {
        border: 1px solid #ffdd99;
        padding: 12px 12px;
      }

      background: #404047;
      border-radius: 8px;
      margin-bottom: 10px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 13px 12px;

      .wineChoose-main-name {
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 16px;
      }
    }
  }

  .popup-wineChoose-footer {
    background: #45454d;
    // position: sticky;
    // left: 0;
    // bottom: 0;
    // width: 100%;
    padding: 20px 0;
  }
}

.save-section {
  padding: 0 12px;

  &-heading {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    line-height: 16px;
    margin-bottom: 10px;
  }

  &-remark {
    padding-top: 20px;

    :deep(.van-cell) {
      background: #28282e;
      border-radius: 8px;
      padding: 7px 12px 12px 12px;
      height: 60px;

      .van-field__control {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        line-height: 24px;

        &::placeholder {
          color: #999999;
        }
      }
    }
  }
}


</style>
